<template>
    <RouterLink :to="herf">
        <div id="MemuItemRoot" :class="active.style">
            <div class="IconText">
                <div v-if="!active.activeIcon_bool" class="Icon">
                    <el-icon :color="active.Icon" :size="Only_Icon.IconSize">
                        <component :is="ICON" />
                    </el-icon>
                </div>
                <div v-if="active.activeIcon_bool" class="Icon">
                    <el-icon :color="active.Icon" :size="Only_Icon.IconSize">
                        <component :is="activeIcon" />
                    </el-icon>
                </div>
                <el-text :type="active.type">{{ text }}</el-text>
            </div>
        </div>
    </RouterLink>
</template>
<script setup>
import { onMounted, computed } from 'vue';
import { RouterLink } from "vue-router"
// 接受的参数
const { text, Coloractive, activeIcon, spin } = defineProps({
    herf: {
        default: "/"
    },
    text: {
        default: ""
    },
    ICON: {},
    activeIcon: {
        default: false
    },
    Coloractive: {
        default: false
    },
    spin: {
        default: false
    },
})

// 激活后的属性
let active = computed(() => {
    let TempObject = {}
    if (Coloractive) {
        // 以下的注释为 文字颜色是否为主题色 的开关
        TempObject['Icon'] = "var(--el-color-primary)"
        TempObject['type'] = "primary",
            TempObject['style'] = "active"

        // 显示激活后图标的逻辑
        if (activeIcon == false) {
            TempObject["activeIcon_bool"] = false;
        } else {
            TempObject["activeIcon_bool"] = true;
        }

        // 是否旋转
        if (spin) {
            TempObject['spin'] = "spin"
        } else {
            TempObject['spin'] = "false"
        }
    } else {

    }
    return TempObject;
})


// 当只有一个Icon时的属性
let Only_Icon = computed(() => {
    let TempObject = {}
    if (text == "") {
        // 当text没有传递值的时候的fr
        TempObject["fr"] = "1fr"
        TempObject["IconSize"] = 40
    } else {
        TempObject["fr"] = "1fr 1fr"
        TempObject["IconSize"] = 29
    }
    return TempObject;
})

onMounted(() => {

})


defineExpose({ Coloractive })
</script>
<style lang="less" scoped>
#MemuItemRoot {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    user-select: none;
    border-bottom: 2px #ffffff00 solid;

    .IconText {
        display: grid;
        grid-template-rows: v-bind("Only_Icon.fr");
        justify-content: center;
        text-align: center;
    }
}

;

// 激活后的样式
.active {
    background-color: var(--MemuBackgroundActive); //这里可以设置背景色，现在不显示的原因是透明度
    transition: background-color 0.5s;
    border-bottom: 2px var(--el-color-primary) solid !important;

    .IconText {
        .Icon {
            .el-icon {
                animation: v-bind("active.spin") 3s linear infinite;
            }
        }
    }
}
</style>